<template>
    <div>
        <div>
            <el-row :gutter="10">
                <el-col :span="5">
                    <div class="grid-content bg-purple">
                        <div style="overflow: hidden">
                            <el-image fit="cover" :src="user.userFace" style="height:150px;margin:auto;display: block;"/>
                        </div>
                    </div>
                </el-col>
                <el-col :span="19">
                    <div class="grid-content bg-purple-light">
                        <h2 class="j-name">
                            <span style="border-right: 1px solid;padding: 0 10px;margin-right: 10px;">{{user.name}}</span>
                            <i class="el-icon-male" v-if="user.sex == '男'" style="color: #409eff"/>
                            <i class="el-icon-female" v-else style="color: #f7acbc"/>
                        </h2>
                        <h2>

                        </h2>
                    </div>
                </el-col>
            </el-row>
        </div>
        <el-button class="el-icon-plus" round style="width: 100%;margin: 10px 0;" @click="dialogVisible = true">新增</el-button>
<!--        <my-article/>-->
        <ul class="infinite-list"style="overflow:auto">
            <li v-for="item in articleData.articleContent" class="infinite-list-item">{{ item.title }}</li>
        </ul>
        <p v-if="articleData.loading">加载中...</p>
        <p v-if="articleData.noMore">没有更多了</p>
        <el-dialog
                :visible.sync="dialogVisible"
                width="30%">
            <rich-text/>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
              </span>
        </el-dialog>
    </div>
</template>

<script>
    import {mapState} from "vuex";
    // import MyArticle from "./myArticle/MyArticle";
    import RichText from "../richText/richText";

    export default {
        name: "personalCenter",
        data() {
            return {
                title:'',
                dialogVisible:false,
                centerDialogVisible: false,
                header: {
                    Authorization: window.sessionStorage.getItem("tokenStr"),
                },
            }
        },
        props:{
            articleData: Object,
        },
        components: {
            RichText
        },
        computed: {
            ...mapState({
                loginServiceApi: state => state.loginServiceApi,
                user: state => state.user,
            })
        },
        methods: {
        }
    }
</script>

<style scoped>
    .bg-purple {
        border: 1px solid #999999;
        padding: 3px;
        height: 150px;
        overflow: hidden;
    }
    .j-name{
        margin: 8px 0px;
        font-weight: normal;
        border-bottom: 1px solid #a5a5a5;
        padding-bottom: 10px;
    }
</style>
